<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>07_节流-认识节流操作</title>
  <!-- 
  在JavaScript中，节流（throttling）是一种控制函数执行频率的技术，常用于优化性能，特别是在处理高频率事件（如滚动、窗口调整大小、键盘输入等）时。节流的主要目的是限制某个函数在一定时间内只能执行一次，从而减少函数的调用次数，提高性能。

  节流的实现原理
  节流的基本思路是：规定一个时间间隔，在这个时间间隔内只允许一次函数调用。即使在这个时间段内事件被触发多次，也只会执行一次。

  function throttle(func, delay) {
      let lastTime = 0; // 上一次执行的时间
      return function(...args) {
          const now = Date.now(); // 当前时间
          if (now - lastTime >= delay) {
              lastTime = now; // 更新上一次执行时间
              func.apply(this, args); // 执行传入的函数
          }
      };
  }

  使用场景
  1. 滚动事件：在页面滚动时，可能会触发大量的滚动事件，使用节流可以减少处理的次数。
  2. 窗口调整大小：在调整窗口大小时，浏览器会频繁触发resize事件，使用节流可以提高性能。
  3. 表单输入：在输入框中输入时，可能会触发多次事件，使用节流可以减少不必要的处理。

  与防抖的区别

  - 节流：在一定时间内只执行一次，适合处理高频率事件。
  - 防抖：在事件触发后的一段时间内，如果没有再次触发，则执行一次，适合处理低频率事件。

  总结
  节流是一种有效的性能优化手段，尤其在处理高频率事件时，可以显著提高应用的响应速度和用户体验。通过合理使用节流，可以减少不必要的函数调用，降低浏览器的负担。
  -->
</head>
<body>

  <button>按钮</button>

  <input type="text">

  <script src="./js/underscore.js"></script>
  <script>
    const inputEl = document.querySelector("input")

    let counter = 1
    inputEl.oninput = _.throttle(function () {
      console.log(`发送了第${counter++}次网络请求`, this.value)
    }, 1000)


  </script>
  
</body>
</html>